[JS/CSS] 重新啟動 CSS 動畫

[JS/CSS] Restart css animation

2022/10/29 07:03:58

今天我們有個 css 動畫，假設長這樣：

.title-main-title
{
    animation: title-name-anim 0.5s ease-out;
    animation-delay: calc(0.04s);
}
@keyframes title-name-anim 
{
    0% {transform: translateY(0); }
    40% {transform: translateY(-0.87em); }
    60% {transform: translateY(-0.87em);}
    100% {transform: translateY(0);}
}

因為沒有設定 loop (aka animation-iteration-count) 次數，所以只會在頁面載入時執行一次。

重開動畫

如果我們想用程式控制它再跑一遍動畫，可以利用重新添加關聯 (e.g. className) 達成：

function resetCssAnim(className) {
    let element = document.getElementsByClassName(className)[0]
    element.classList.remove(className)
    void element.offsetWidth;  // magic
    element.classList.add(className)
}

暫停動畫

element.style.webkitAnimationPlayState = "paused";
// ...
element.style.webkitAnimationPlayState = "running";

以上紀錄。

重開動畫
暫停動畫